<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局</title>
  <style>
    #box {
        width: 300px;
        height: 300px;
        background: #ddd;
        display: flex;
        align-items: center;
    }
  </style>
</head>
<body>
  <h1>flex布局</h1>
  <pre>
    这种方式同样适用于块级元素
    flex布局请参考阮一峰《felx布局教程》
    flex也就是flexible，意为灵活的、柔韧的、易弯曲的。
    元素可以通过设置 display:flex; 将其指定为 flex 布局的容器，指定好了容器之后再为其添加 align-items 属性，该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式，可能的取值有五个，分别如下：

    flex-start:：交叉轴的起点对齐
    flex-end：交叉轴的终点对齐
    center：交叉轴的中点对齐
    baseline：项目第一行文字的基线对齐
    stretch（该值是默认值）：如果项目没有设置高度或者设为了auto，那么将占满整个容器的高度
  </pre>
  <div id="box">test vertical align</div>
</body>
</html>